<template>
	<div class="content">
		<div class="content_title">
			<p>我的证书</p>
		</div>
		<div class="content_bottom">
			<!-- <li v-for="(item,index) in 5" @click="handleDownLoad('http://cos-1253892290.cos.ap-guangzhou.myqcloud.com/pic_202318747.png', '图片名称')">
				<img src="http://cos-1253892290.cos.ap-guangzhou.myqcloud.com/pic_202318747.png" alt="">
				<p>证书名称</p>
			</li> -->
			<!-- http://cos-1253892290.cos.ap-guangzhou.myqcloud.com/pic_202318747.png -->
			<div class="errorIcon">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		getByWxUserUuids
	} from "../../api/home.js";
	import {
		reactive,
		onBeforeMount
	} from 'vue'
	
	onBeforeMount(() => {
		getList()
	})
	const getList = ()=> {
		var data = {
			params: localStorage.getItem('userUuid')
		}
		getByWxUserUuids(data).then(res=> {
			console.log(res,"1111")
		})
	}
	// 下载图片03
	const download = (href, name) => {
	    let eleLink = document.createElement("a");
	    eleLink.download = name;
	    eleLink.href = href;
	    eleLink.click();
	    eleLink.remove();
	};
	 
	// 下载图片02
	const downloadByBlob = (url, name) => {
	    let image = new Image();
	    image.setAttribute("crossOrigin", "anonymous");
	    image.src = url;
	    image.onload = () => {
	        let canvas = document.createElement("canvas");
	        canvas.width = image.width;
	        canvas.height = image.height;
	        let ctx = canvas.getContext("2d");
	        ctx.drawImage(image, 0, 0, image.width, image.height);
	        canvas.toBlob((blob) => {
	            let url = URL.createObjectURL(blob);
	            download(url, name);
	            // 用完释放URL对象
	            URL.revokeObjectURL(url);
	        });
	    };
	};
	 
	// 下载图片01
	const handleDownLoad = (url, name) => {
	    const iframe = document.createElement("iframe");
	    iframe.style.display = "none";
	    iframe.src = url;
	    document.body.appendChild(iframe);
	    setTimeout(() => {
	        document.body.removeChild(iframe);
	    }, 200);
	 
	    // 下载图片
	    downloadByBlob(url, name);
	};
</script>

<style lang="scss" scoped>
	.content{
		width: 910px;
		margin-left: 30px;
		&_title{
			width: 100%;
			border-bottom: 1px solid #D9D9D9;
			p{
				width: fit-content;
				font-size: 18px;
				font-weight: 600;
				color: #11918E;
				padding-bottom: 9px;
				border-bottom: 2px solid #11918E;
			}
			
		}
		&_bottom{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			li{
				width: 280px;
				height: 414px;
				background: #FFFFFF;
				border-radius: 10px;
				overflow: hidden;
				margin-bottom: 15px;
				border: 1px solid rgba(17,145,142,0.2);
				margin-right: 30px;
				img{
					width: 280px;
					height: 373px;
				}
				p{
					width: 280px;
					font-size: 16px;
					font-weight: 400;
					color: #333333;
					text-align: center;
				}
			}
			li:nth-of-type(3n+0) {margin-right: 0;}
		}
	}
</style> 